<style type="text/css">
	div.router-link{
		vertical-align:middle;
		width:628px;
		height:223px;
		margin:104px auto 45px;
	}
	div.pic-router-bg{
		background:url(/luci-static/images/pic-router_pc.png?_=20170809165512) no-repeat;
		background-size:628px 223px;
	}
	p.note-tip{
		margin-top:133px;
	}
	div.router-str{
		color:#3f4044;
		font-size:14px;
		display:inline-block;
		width:258px;
		margin-top:14px;
	}
	div.old-router{
		text-align:left;
	}
	div.new-router{
		text-align:right;
	}
	input.btn-right{
		margin-left:28px;
		background-color:#FF7800;
	}
	input.router-unlinked{
		background-color:#E8E8E8;
	}
	li.current-step h2{
		background-color:#13b1d8;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		div.router-link{
			width:836px;
			height:296px;
			margin:140px auto 133px;
		}
		div.pic-router-bg{
			background-size:836px 296px;
		}
		p.note-tip{
			margin-top:181px;
		}
		div.router-str{
			font-size:18px;
			width:340px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {find_pwd = {link_status = {}}}
		local data = tpl_get_data(para, true)
	-%>
	var result = <%=data%>;
	var currentState = stateman.current.name;

	function initPage(result){
		var errNo = result[ERR_CODE];
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var linkStatus = ret.find_pwd.link_status;
		var link = linkStatus["status"];
		if ("1" == link){
			showLinkState(link, label.connectSuccess);
			$("#Start").removeClass("router-unlinked");
		}else{
			showLinkState(link, label.connectTip);
			$("#Start").addClass("router-unlinked");
		}
	}

	function showLinkState(state, stateStr){
		if (state){
			$("p.note-str").css("color","#FF7800").text(stateStr);
		}else{
			$("p.note-str").css("color","#F34947").text(stateStr);
		}
	}

	var refreshLindStateHd = null;
	function refreshLinkState(){
		var para = {
			find_pwd:{link_status:null}
		};

		apiGet(para, function(data){
			if (currentState != stateman.current.name){
				return;
			}
			initPage(data);

			refreshLindStateHd = $.setTimeout(refreshLinkState, 2000);
		});
	}

	$("#Back").click(function(){
		stateman.go("guideNetworkSet");
	});

	$("#Start").click(function(){
		if (!($("#Start").hasClass("router-unlinked"))){
			showLoading(label.findingPppoePwd);
			clearTimeout(refreshLindStateHd);

			var para = {
				find_pwd:{config:null}
			};

			apiGet(para, function(result){
				closeLoading();
				var errNo = result[ERR_CODE];
				if (E_NONE == errNo){
					ret = result[K_MODULE];
				}else{
					console.log(result);
					return;
				}

				var data = ret.find_pwd.config;

				var setValue = {};
				setValue.find_success = data.find_success;
				setValue.user = data.user;
				setValue.password = data.password;
				for (var k in setValue){
					sessionLS.setItem(k, setValue[k]);
				}
				stateman.go("findPppoePwd");
			});
		}
	});

	initPage(result);
	refreshLinkState();

	var scroll = new NiceScroll("GuideCon");
	scroll.init();
})();
</script>
<div class="head">
	<div class="left-logo">
		<img class="logo" src="/luci-static/images/phicomm.png?_=20170809165512" alt="phicomm" />
		<span class="brand">{%label.phicomm%}</span>
	</div>
</div>
<div id="GuideCon" class="guide">
	<div class="router-link pic-router-bg">
		<div class="err-note">
			<p class="note-str note-tip">{%label.connectTip%}</p>
		</div>
		<div class="router-str old-router">{%label.oldRouterWan%}</div>
		<div class="router-str new-router">{%label.newRouterLan%}</div>
	</div>
	<div class="fun-btn">
		<input id="Back" class="btn guide-btn" type="button" value="{%btn.back%}"/>
		<input id="Start" class="btn guide-btn btn-right router-unlinked" type="button" value="{%btn.startFindPwd%}"/>
	</div>
</div>
<%+footer%>